<template>
    <div>
        <!-- <div v-if="isLoading" id="loading" style="width:100%;height:100vh;    align-items: center;display: flex;justify-content: center;">
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
                <rect x="0" y="10" width="4" height="10" fill="#333" opacity="0.2">
                    <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite" />
                    <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite" />
                    <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite" />
                </rect>
                <rect x="8" y="10" width="4" height="10" fill="#333" opacity="0.2">
                    <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
                    <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
                    <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
                </rect>
                <rect x="16" y="10" width="4" height="10" fill="#333" opacity="0.2">
                    <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
                    <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
                    <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
                </rect>
            </svg>
        </div> -->
        <div class="container_bill">
            <mt-header fixed title="账单列表"></mt-header>
            <section>
                <div class="bill_div" v-if="listSate">
                    <div class="bill_list" v-for="item in billListdata">
                        <h3 class="title"><span>{{item.year}}年</span></h3>
                        <div class="bill_listor" v-for="list in item.data" @click="billshow(list.id)">
                            <div class="moth_list">
                                <div class="left_moth">
                                    <span class="title_moth">{{list.name}}</span>
                                    <span class="time_span">{{list.timeRound}}</span>
                                </div>
                                <div class="many_right">
                                    <span style="color: #666666;margin-right: 0.1rem">￥{{list.total}}</span>
                                    <span style="color: #888" class="fa fa-angle-right"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <section v-else class="no-order">
                    <img src="../../assets/image/null@3x.png" alt="">
                    <p>暂无账单</p>
                </section>
            </section>
        </div>
    </div>
</template>

<script>
import app from '~/assets/api/config'
export default {
    data() {
        return {
            isLoading: true,
            billListdata: [], //数据
            listSate: true
        }
    },
    methods: {
        loaddataadd() {
            //数据列表
            this.$axios
                .post(app.API_BES_URL + '/api/backend/v1/bill/getList')
                .then(res => {
                    if (res.data.code == 0) {
                        this.billListdata = res.data.data
                        if (this.billListdata.length == 0) this.listSate = false
                    }
                })
        },
        billshow(val) {
            //账单详情
            this.$router.push({ name: 'billdetails', query: { billid: val } })
        }
    },
    mounted() {
        this.loaddataadd()
        setTimeout(() => {
            this.isLoading = false
        }, 500)
    }
}
</script>

<style lang="less">
.container_bill {
    width: 100%;
    margin: 0 auto;
    .bill_div {
        float: left;
        width: 100%;
        .bill_list {
            float: left;
            width: 100%;
            h3.title {
                text-align: center;
                float: left;
                width: 100%;
                padding: 0.2rem 0;
            }
            h3.title span {
                display: block;
                font-size: 0.35rem;
                color: #626262;
                position: relative;
                float: left;
                width: 100%;
            }
            h3.title span:before,
            h3.title span:after {
                content: '';
                position: absolute;
                top: 52%;
                background: #ccc;
                width: 30%;
                height: 0.03rem;
            }
            h3.title span:before {
                left: 10%;
            }
            h3.title span:after {
                right: 10%;
            }
            .bill_listor {
                background: #fff;
                float: left;
                width: 100%;
                .moth_list {
                    float: left;
                    width: 100%;
                    margin-bottom: 0.3rem;
                    margin-top: 0.3rem;
                    .left_moth {
                        float: left;
                        margin-left: 0.4rem;
                        height: 1.2rem;
                        span {
                            display: block;
                        }
                        .title_moth {
                            font-size: 0.5rem;
                        }
                        .time_span {
                            font-size: 0.3rem;
                            color: #808080;
                        }
                    }
                    .many_right {
                        float: right;
                        height: 1.2rem;
                        line-height: 1.2rem;
                        margin-right: 0.4rem;
                    }
                }
            }
        }
        .bottom-title {
            text-align: center;
            float: left;
            width: 100%;
            height: 1rem;
            margin-top: 0.3rem;
            margin-bottom: 0.2rem;
            span {
                display: block;
                font-size: 0.3rem;
                color: #ddd;
                position: relative;
            }
            span:before,
            span:after {
                content: '';
                position: absolute;
                top: 52%;
                background: #ddd;
                width: 30%;
                height: 0.02rem;
            }
            span:before {
                left: 10%;
            }
            span:after {
                right: 10%;
            }
        }
    }
}
.no-order {
    position: fixed;
    width: 100%;
    img {
        display: block;
        width: 27%;
        height: auto;
        margin: 4rem auto 0.5rem;
    }
    p {
        display: block;
        text-align: center;
        font-size: 0.38rem;
        color: #8b8b8b;
    }
}
</style>
<style>
.mint-header {
    font-size: 0.45rem !important;
    height: 1.173333rem !important;
    background: #fff !important;
    color: #2e2e2e !important;
    border-bottom: 0.016667rem solid #f8f8f8 !important;
}
.mint-header-title {
    font-size: 0.426667rem !important;
}
</style>

